// @flow
import React, { Component } from 'react';
import { Icon, Button } from 'antd';
import Face from 'assets/face.png';
import { Link } from 'react-router-dom';
import './HomeComp.scss';

type Props = {};

class IndexComp extends Component<Props> {
  render() {
    return (
      <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
        <div className="IndexComp">
          <div className="left-panel">
            <h1 style={{ color: 'white' }}>面朝大海,春暖花开</h1>

            <p>
              <span>海子</span>
            </p>
            <div>
              <div>
                <p>
                  {'从明天起，做一个幸福的人'}
                  <br />
                  {'喂马、劈柴，周游世界 从明天起，关心粮食和蔬菜'}
                  <br />
                  {' 我有一所房子，面朝大海，春暖花开'}
                </p>
                <p>
                  {'从明天起，和每一个亲人通信'}
                  <br />
                  {'告诉他们我的幸福'}
                  <br />
                  {'那幸福的闪电告诉我的'}
                  <br />
                  {'我将告诉每一个人'}
                </p>
                <p>
                  {'给每一条河每一座山取一个温暖的名字'}
                  <br />
                  {'陌生人，我也为你祝福'}
                  <br />
                  {'愿你有一个灿烂的前程'}
                  <br />
                  {'愿你有情人终成眷属'}
                  <br />
                  {'愿你在尘世获得幸福'}
                  <br />
                  {'我只愿面朝大海，春暖花开'}
                </p>
              </div>
            </div>
          </div>
          <div className="right-panel">
            <div className="logo-name">
              {/* <img className="Face" src={Face} alt="Logo" /> */}
              <div className="Face" />
              <h1 style={{ fontSize: '50px' }}>Methew Pan</h1>
            </div>

            <h2>开发 || 部落格 || 企业管理</h2>
            <div
              style={{
                borderBottom: 'solid',
                padding: '20px',
                width: '15rem',
                justifyContent: 'center',
              }}
            >
              <span>
                {'   '}
                大家好我是Methew Pan.现在在一家企业管理ERM系统的开发运维工作。
              </span>
            </div>
            <div style={{ padding: '10px' }}>
              <span />
            </div>
            <div
              style={{
                width: '100%',
                display: 'flex',
                justifyContent: 'center',
              }}
            >
              <Button shape="circle" href="/blog" icon="file-text" size="large" />
              <Button shape="circle" href="/actions" icon="ordered-list" size="large" />
              <Button shape="circle" href="/pay" icon="pay-circle" size="large" />
              <Button shape="circle" href="/twitter" icon="twitter" size="large" />
              <Button shape="circle" href="/instagram" icon="instagram" size="large" />
              <Button shape="circle" href="/github" icon="github" size="large" />
            </div>
          </div>
        </div>
        <div className="footer">
          <span>eeee</span>
        </div>
      </div>
    );
  }
}

export default IndexComp;
